<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue快速入门示例</title>

    <!-- 引入Vue.js -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <style >
        .item{
            color: red;
        }
    </style>
</head>
<body>
<div id="app">
    {{ message }}
    <br/>
    <!--双向绑定-->
    <input type="text" v-model="info">
    <!--Click事件-->
    <button @click="handleClick">提交</button>
    <br/>
    <ul>
        <!--循环遍历-->
        <!--<li v-for="item in itemList">{{item}}</li>-->

        <!--使用模板-->
        <li-template v-for="item in itemList" :title="item"></li-template>
    </ul>
</div>

<script>
    // 创建一个Vue组件,并通过template和props进行绑定
    Vue.component('li-template', {
        props: ['title'],
        template: '<li class="item">{{ title }}</li>'
    })

    // Vue实例对象
    var app = new Vue({
        el: '#app',
        data: {
            message: 'Hello Vue!',
            info: '',
            itemList:[]
        },
        methods: {
            handleClick(){
                this.itemList.push(this.info);
                this.info = '';
            }
        }
    })
</script>
</body>
</html>